<template>
  <div id="index">
    <div id="container">
    </div>
    <el-drawer
      :direction="direction"
      :modal="false"
      :modal-append-to-body="false"
      :visible.sync="drawer"
      :wrapperClosable="false"
      title=""
    >
      <!-- :before-close="handleClose" -->
      <div class="box">
        <div v-if="drawerInfo">
          <!--<div class="box-title">场站信息</div>
          <div class="stationName line">场站名称：{{drawerInfo.chargeStation.stationName}}</div>
          <div class="address line">地址：{{ drawerInfo.chargeStation.addressInfo }}</div>
          <div class="lat line">纬度：{{ drawerInfo.chargeStation.latitude }}</div>
          <div class="lng line">经度：{{ drawerInfo.chargeStation.longitude }}</div>
          <div class="box-title">设备信息</div>
          <div class="devdeviceCountice line">设备总数：{{ drawerInfo.chargeStationSurveyVo.deviceCount }}</div>
          <div class="offLineCount line">在线设备：{{ drawerInfo.chargeStationSurveyVo.offlineCount }}</div>
          <div class="onLineCount line">离线设备：{{ drawerInfo.chargeStationSurveyVo.onLineCount }}</div>
          <div class="box-title">代理商信息</div>
          <div class="agent line">代理商：{{ drawerInfo.platformAgent.agentName }}</div>
          <div class="agentPhone line">代理商号码：{{ drawerInfo.platformAgent.agentPhone }}</div>-->
          <el-descriptions :column="1" :labelStyle="{width: '100px'}" border class="margin-top" title="场站信息">
            <el-descriptions-item>
              <template slot="label">
                场站名称
              </template>
              {{ drawerInfo.chargeStation.stationName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                地址
              </template>
              {{ drawerInfo.chargeStation.addressInfo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                纬度
              </template>
              {{ drawerInfo.chargeStation.latitude }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                经度
              </template>
              {{ drawerInfo.chargeStation.longitude }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" :labelStyle="{width: '100px'}" border class="margin-top" title="设备信息">
            <el-descriptions-item>
              <template slot="label">
                设备总数
              </template>
              {{ drawerInfo.chargeStationSurveyVo.deviceCount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                在线设备
              </template>
              {{ drawerInfo.chargeStationSurveyVo.onLineCount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                离线设备
              </template>
              {{ drawerInfo.chargeStationSurveyVo.offlineCount }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" :labelStyle="{width: '100px'}" border class="margin-top" title="代理商信息">
            <el-descriptions-item>
              <template slot="label">
                代理商
              </template>
              {{ drawerInfo.platformAgent.agentName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                代理商号码
              </template>
              {{ drawerInfo.platformAgent.agentPhone }}
            </el-descriptions-item>

          </el-descriptions>
        </div>
        <!-- chargeStation  -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {stationInfoList, stationInfo, clientTime} from '../api/home'

export default {
  data() {
    return {
      markerArr: [],
      isShow: false,
      markerLayer: '',

      // 抽屉
      drawer: false,
      direction: 'rtl',
      drawerInfo: '',

      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.initMap()
    this.getStationList()
    this.clientTime()
  },
  methods: {
    async clientTime(){
      try {
        let res = await clientTime(new Date().getTime())
      }catch (e) {

      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    A() {
      this.isShow = false
    },
    async getStationList() {
      let res = await stationInfoList()
      console.log(res.rows, '场站列表查');
      res.data.forEach((item, index) => {
        // this.markerArr.push({
        //   "id":index,
        //     "styleId": 'myStyle',
        //     "position": new TMap.LatLng(item.latitude,item.longitude),
        //     "properties":{
        //       "stationName": item.stationName,
        //       "agent":item.agentId,
        //       "address": item.addressInfo,
        //       "lat":item.latitude,
        //       "lng":item.longitude,
        //       "deviceNumber": '8',
        //       "used": '5',
        //       "free":'3',
        //       'fault':'0',
        //     }
        // })
        this.markerLayer.add([{
          "id": index,
          "styleId": 'myStyle',
          "position": new TMap.LatLng(item.latitude, item.longitude),
          "properties": {
            "stationName": item.stationName,
            "agent": item.agentId,
            "address": item.addressInfo,
            "lat": item.latitude,
            "lng": item.longitude,
            "deviceNumber": '8',
            "used": '5',
            "free": '3',
            'fault': '0',
            "stationId": item.id,
          }
        }])
      });
      console.log(this.markerArr, '数组');
    },
    async getStationInfo(stationId) {
      let res = await stationInfo(stationId)
      setTimeout(() => {
        this.drawerInfo = res.data
        console.log(this.drawerInfo, '场站信息');
        this.drawer = true
      }, 100)
    },
    initMap() {
      //设置一个默认的中心点 (荆州市)30.35269, 112.19016
      const _self = this
      var center = new TMap.LatLng(30.332064388471387, 112.25446759946476)
      //初始化地图
      var map = new TMap.Map(document.getElementById('container'), {
        center: center,//设置地图中心点坐标
        zoom: 12.5,   //设置地图缩放级别
        // pitch: 43.5,  //设置俯仰角
        // rotation: 45    //设置地图旋转角度
      });
      console.log(2);
      // 新建一个IP定位类
      var ipLocation = new TMap.service.IPLocation();
      // 未给定ip地址则默认使用请求端的ip地址(params)
      var params = {};
      /*ipLocation.locate(params)//发送定位请求获得ip地址
        .then((result2) => {
          //使用获得到的ip地址信息（经纬度）改变地图的中心点
          map.setCenter(new TMap.LatLng(result2.result.location.lat, result2.result.location.lng));
        })
        .catch((error) => {
          console.log(error);
        });*/

      //设定marker点及其样式
      // this.markerLayer= new TMap.MultiMarker()
      this.markerLayer = new TMap.MultiMarker({
        map: map,  //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          "myStyle": new TMap.MarkerStyle({
            "width": 25,  // 点标记样式宽度（像素）
            "height": 35, // 点标记样式高度（像素）
            // "src": './images/R-C.png',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            // "anchor": { x: 16, y: 32 }
          })
        },
        //点标记数据数组
        geometries: this.markerArr
      });

      //监听marker点击事件
      this.markerLayer.on('click', function (evt) {
        console.log(evt.geometry.properties.stationId, '场站ID');

        _self.getStationInfo(evt.geometry.properties.stationId)
        // _self.drawerInfo=_self.markerArr[evt.geometry.id]
        // console.log(_self.drawerInfo,'窗口信息');

      })
    },

  },
};
</script>

<style lang="scss" scoped>
#index {
  width: 100%;
  height: calc(100vh - 84px);
  // position: relative;
  color: black;

  #container {
    width: 100%;
    height: calc(100vh - 84px);
    padding: 0;
    margin: 0;
  }
}

.box {
  width: 463px;
  height: 350px;
  // padding-left: 30px;
  // box-sizing: border-box;
  font-size: 18px;
  padding-left: 30px;
  box-sizing: border-box;

  .box-title {
    font-size: 25px;
    color: black;
  }

  .line {
    margin: 8px 0;
  }
}

.ct {
  // z-index: 100 !important;
  top: 0 !important;
  left: 75% !important;
  right: 0 !important;
  bottom: 0 !important;
}

::v-deep.el-drawer__header {
  font-size: 30px;

}

::v-deep.box {
  background-color: white;
  color: gray;
}

::v-deep .el-drawer__container {
  width: 25%;
  height: 80%;
  position: fixed;
  top: 10%;
  left: 75%;
  right: 0;
  bottom: 10%;
  margin: 0;
}

::v-deep .rtl {
  width: 100% !important;
  border-radius: 20px !important;
  // z-index: 9999 !important;
}

::v-deep .el-drawer__header {
  /*font-size: 30px;*/
  margin-bottom: 0;
  font-weight: bold;
  color: #1e1e1e;
}

.margin-top {
  margin-top: 20px;
}
</style>

